<template>
    <div class="main clearfix">
        <!--左侧导航栏-->
        <ul class="main-nav" @click="goSearch">
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-dianzishebei"></i>
                <a  class="link">鼠标</a>
                <a  class="link">键盘</a>
                <a  class="link">电脑支架</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-shouji"></i>
                <a  class="link">手机</a>
                <a  class="link">手机壳</a>
                <a  class="link">数据线</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-shenghuoyongpin"></i>
                <a  class="link">卫生纸</a>
                <a  class="link">洗衣液</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-xiebaofushi"></i>
                <a  class="link">外套</a>
                <a  class="link">长裤</a>
                <a  class="link">Lolita</a>
                <a  class="link">鞋子</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-xiyiji"></i>
                <a  class="link">洗衣机</a>
                <a  class="link">烘干机</a>
                <a  class="link">显示器</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-lingshi"></i>
                <a  class="link">速食面包</a>
                <a  class="link">辣条</a>
                <a  class="link">薯片</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-chufang"></i>
                <a  class="link">自热米饭</a>
                <a  class="link">自热火锅</a>
                <a  class="link">泡面</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-xuexi"></i>
                <a  class="link">小说</a>
                <a  class="link">教材</a>
                <a  class="link">作业本</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-zhuangshi"></i>
                <a  class="link">窗帘</a>
                <a  class="link">墙纸</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-hufupin"></i>
                <a  class="link">洗面奶</a>
                <a  class="link">精华乳</a>
                <a  class="link">化妆品</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
            <li class="item">
                <!--此处放置图标字体-->
                <i class="iconfont icon-jiaju-"></i>
                <a  class="link">电脑椅</a>
                <a  class="link">吊椅</a>
                <a  class="link">折叠桌</a>
                <i class="iconfont icon-jiantou"></i>
            </li>
        </ul>
        <!--中间大图区-->
        <Carousel :list="bannerList"></Carousel>

        <!--活动入口-->
        <ul class="main-activity">
            <li class="item" v-for="(item,index) in activityList" :key="item.id">
                <a >
                    <img v-lazy="item.imgUrl" class="main-activity-picture" />
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
import { reqGetBannerList } from '@/api';
import { mapState } from 'vuex';
export default {
    data() {
        return {
            activityList:[
                {
                    imgUrl:require("@/assets/img/main-acticity1.png"),
                    id:1
                },
                {
                    imgUrl:require("@/assets/img/main-acticity2.jpg"),
                    id:2
                },
                {
                    imgUrl:require("@/assets/img/main-acticity3.jpg"),
                    id:3
                }
            ]
        };
    },
    mounted(){
        this.$store.dispatch("home/getBannerList");
    },
    computed:{
        ...mapState("home",["bannerList"])
    },
    methods:{
        goSearch(event){
            let keyword = event.target.innerText;
            if(keyword){
                this.$router.push({
                    name:"search",
                    params:{
                        keyword
                    }
                })
            }
        }
    }

};
</script>

<style lang="less" scoped>
/*以下是中间主题部分的样式表（导航栏，轮播图（暂未实现轮播效果），右侧活动）*/
.main {
    width: 1200px;
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    height: 480px;
}

.main-nav .item {
    background-color: rgb(255, 255, 255);
    height: 43px;
    line-height: 40px;
}

.main-nav .item:hover,
.main-nav .item:hover i,
.main-nav .item:hover a {
    background-color: rgb(255, 236, 236);
    color: red;
}

.main-nav .item .link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.main-nav .item .iconfont:first-child {
    margin-left: 10px;
    font-size: 19px;
}

.main-nav .item .icon-jiantou {
    font-size: 12px;
    float: right;
    margin: 0 15px;
}

.main-nav .item .link {
    color: #333;
    font: 14px arial, sans-serif;
    text-decoration: none;
    margin-left: 7px;
}

.swiper-container {
    width: 750px;
    height: 473.5px;
}


.main .main-activity {
    width: 192px;
    margin-right: 0px;
}

.main-activity .main-activity-picture {
    width: 100%;
}

.main-activity li {
    margin-bottom: 8px;
}

.main-activity li:last-child {
    margin-bottom: 0;
}
</style>